{% extends "global/Page.html" %}
{{ block title }}

{{ endblock }}



{{ block content }}


<style>
    label.btn.btn-default.btn-secondary.active {
        background: yellow;
        color: black;
    }

</style>

<script src="{{ static 'global/js/survey.jquery.min.js'}}"></script>
<script src="{{ static 'global/js/showdown.min.js'}}"></script>


<div class="container mt-5">
    <div class="row">
        <div class="col">

            <div class="card">

                <div class="card-body">
                    <h5 class="card-title">Вспомните следующее утверждение:</h5>
                    <div class="card-text lead text-center">{{ Constants.statement_lgbt }}</div>

                </div>
            </div>
            <div id="surveyElement" style="display:inline-block;width:100%;"></div>

        </div>
    </div>
</div>
<input type="hidden" id="surveyholder" name="surveyholder">
<script>

    Survey.defaultBootstrapCss.navigationButton = "btn-primary btn-lg";
    Survey
        .StylesManager
        .applyTheme("bootstrap");

    var json = {
        "completeText": "Далее", showCompletedPage: false, requiredText:'',
        questions:
            [
                {
                    "hideNumber": true,
                    isRequired: true,
                    "type": "radiogroup",
                    "name": "ias_friend",
                    "title": "Выберите, какая позиция характеризует вас лучше всего:  ",
                    "choices": [
                        "Я бы предпочел не знать, что думает **мой друг** о приведенном выше высказывании.  ",
                        "Даже если это меня расстроит, я хочу знать, что **мой друг** думает о приведенном выше высказывании.",

                    ]
                },
                {
                    "hideNumber": true, isRequired: true,
                    "type": "radiogroup",
                    "name": "ias_coworker",
                     "title": "Выберите, какая позиция характеризует вас лучше всего:  ",
                    "choices": [
                        "Я бы предпочел не знать, что думает **мой коллега** по работе о приведенном выше высказывании.  ",
                        "Даже если это меня расстроит, я хочу знать, что думает **мой коллега** по работе о приведенном выше высказывании.",

                    ]
                },
                {
                    "hideNumber": true, isRequired: true,
                    "type": "radiogroup",
                    "name": "ias_stranger",
                   "title": "Выберите, какая позиция характеризует вас лучше всего:  ",
                    "choices": [
                        "Я бы предпочел не знать, что **малознакомый мне человек** думает о приведенном выше высказывании. ",
                        "Даже если это меня расстроит, я хочу знать, что думает о приведенном выше высказывании **малознакомый мне человек**",

                    ]
                },

            ]
    };

    window.survey = new Survey.Model(json);

    survey
        .onComplete
        .add(function (sender) {
            document
            $('#surveyholder').val(JSON.stringify(sender.data, null, 3))
            $('#form').submit()
            ;
        });
    //Create showdown markdown converter
    var converter = new showdown.Converter();
    survey
        .onTextMarkdown
        .add(function (survey, options) {
            //convert the markdown text to html
            var str = converter.makeHtml(options.text);
            //remove root paragraphs <p></p>
            str = str.substring(3);
            str = str.substring(0, str.length - 4);
            //set html
            options.html = str;
        });

    $("#surveyElement").Survey({model: survey});
    ;
</script>


{{ endblock }}
